import React, { useEffect, useState } from "react";
import TodoItem from "./TodoItem";

// 引入 store
import store from "../store";

// console.log(store.getState(), "====");

export default function TodoList() {
  console.log("TodList 组件");
  // 获取到仓库的 state 数据
  // let state = store.getState(); // 这样定义的 state 变化的话，不能引起组件的更新。
  const [state, setState] = useState(store.getState());

  // 监听 store 的变化，监听是否副作用，需要使用 useEffect
  useEffect(() => {
    store.subscribe(() => {
      console.log("仓库的数据更新了，获取到的最新数据是：", store.getState());
      // 把新的 store.getState() 赋值给 组件的 state 能不能行呢？
      // 不行：当前 let state = store.getState(); 这个 state 不是可以引起组件渲染的 数据
      // state = store.getState();

      // 使用 setState 重新给当前组件的 state 赋值
      setState(store.getState());
    });
  }, []);

  return (
    <div className="todo-list">
      <div className="todo-list__name">Todo List</div>

      {state.todos.map((item) => {
        return <TodoItem key={item.id} {...item} />;
      })}
    </div>
  );
}
